<template>
    <div class="home-page">
        <search-bar />
        <div class="content">
            <vaccination-area />
            <quick-nav />
            <health-services />
            <nearby-hospitals />
        </div>
    </div>
</template>

<script setup lang="ts">
import SearchBar from '@/components/home/SearchBar.vue'
import VaccinationArea from '@/components/home/VaccinationArea.vue'
import QuickNav from '@/components/home/QuickNav.vue'
import HealthServices from '@/components/home/HealthServices.vue'
import NearbyHospitals from '@/components/home/NearbyHospitals.vue'
</script>

<style scoped lang="scss">
.home-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 50px; // 为底部导航栏预留空间

    .content {
        >div {
            margin-bottom: 8px;

            // &:last-child {
            //     margin-bottom: 0;
            // }
        }
    }
}
</style>